<!--
 * @Author: trk trk990920@163.com
 * @Date: 2022-06-30 14:35:12
 * @LastEditors: trk trk990920@163.com
 * @LastEditTime: 2022-07-12 14:25:52
 * @Description: 侧边栏菜单
-->
<template>
  <div>
    <SideBarLogo :collapse="!isCollapse" />
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu
        :collapse="isCollapse"
        :unique-opened="false"
        :default-active="activeMenu"
        :background-color="variables.menuBg"
        :text-color="variables.menuText"
        :active-text-color="variables.menuActiveText"
        mode="vertical"
      >
        <SidebarItem
          v-for="route in routes"
          :key="route.path"
          :item="route"
          :base-path="route.path"
          :is-collapse="!isCollapse"
          />
        </el-menu>
    </el-scrollbar>
  </div>
</template>
<script lang='ts' setup>
import SideBarLogo from './sideBarLogo.vue'
import SidebarItem from './sidebarItem.vue'
import variables from '@/styles/sidebar.module.scss'
import { sideBarStore } from '@/store/modules/sideBar'
import { usePermissionStore } from '@/store/modules/permission'
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { ElMenu, ElScrollbar } from 'element-plus'

const route = useRoute()

const sidebar = computed(() => {
  return sideBarStore()
})
const routes = computed(() => {
  return usePermissionStore().routes
})
// 菜单栏是否折叠
const isCollapse = computed(() => {
  return !sidebar.value.opened
})
// 高亮当前路由对应的菜单
const activeMenu: any = computed(() => {
  const { meta, path } = route
  if (meta !== null || meta !== undefined) {
    if (meta.activeMenu) {
      return meta.activeMenu
    }
  }
  return path
})

</script>
<style lang="scss">
.sidebar-container {
  // reset element-ui css
  .horizontal-collapse-transition {
    transition: 0s width ease-in-out, 0s padding-left ease-in-out,
      0s padding-right ease-in-out;
  }

  .scrollbar-wrapper {
    overflow-x: hidden !important;
  }

  .el-scrollbar__view {
    height: 100%;
  }

  .el-scrollbar__bar {
    &.is-vertical {
      right: 0px;
    }

    &.is-horizontal {
      display: none;
    }
  }
}
</style>
<style lang="scss" scoped>
.el-scrollbar {
  height: 100%;
}

.has-logo {
  .el-scrollbar {
    height: calc(100vh - 100px);
  }
}

.el-menu {
  border: none;
  height: 100%;
  width: 100% !important;
}
</style>
